import React, { useState, useEffect } from 'react'
import { View, ScrollView, Text } from '@tarojs/components'
import { getCards } from '../../services/storage'
import MemoryCard from '../../components/MemoryCard/MemoryCard'
import './history.scss'

export default function History() {
  const [cards, setCards] = useState([])

  useEffect(() => {
    getCards().then(list => setCards(list))
  }, [])

  return (
    <View className='history'>
      {cards.length === 0 ? (
        <Text className='empty'>暂无交互记录</Text>
      ) : (
        <ScrollView scrollY className='list'>
          {cards.map(card => (
            <MemoryCard card={card} key={card.id} />
          ))}
        </ScrollView>
      )}
    </View>
  )
} 